<template>
  <!-- 訂單管理 -->
  <a-drawer
    :title="title"
    :width="800"
    placement="right"
    :closable="false"
    @close="close"
    :visible="visible"
  >
    <a-spin :spinning="confirmLoading">
      <h2>卖方信息</h2>
      <div>企业名称：{{ model.enterpriseName }}</div>
      <div>销售区域：{{ model.region }}</div>
      <div>销售地址：{{ model.businessAddress }}</div>
      <div>销售顾问姓名：{{ model.salesName }}</div>
      <div>销售顾问手机号码： {{ model.salesPhone }}</div>
      <br />
      <h2>买方信息</h2>
      <div>姓名： {{ model.ownerName }}</div>
      <div v-if="model.documentType == 1">购车人证件类型：身份证</div>
      <div v-if="model.documentType == 2">购车人证件类型：护照</div>
      <div v-if="model.documentType == 3">购车人证件类型：士兵证军官证</div>
      <div v-if="model.documentType == 4">购车人证件类型：港澳居民居住证</div>
      <div v-if="model.documentType == 5">购车人证件类型：:港澳居民来往内地通行证</div>
      <div v-if="model.documentType == 6">购车人证件类型：台湾居民居住证</div>
      <div v-if="model.documentType == 7">购车人证件类型：台湾居民来往大陆通行证</div>
      <div v-if="model.documentType == 8">购车人证件类型：外国人永久居留身份证</div>
      <div v-if="model.documentType == 9">购车人证件类型：其他有效身份证明</div>

      <div>证件号码： {{ model.documentNumber }}</div>
      <div>手机号码： {{ model.ownerPhone }}</div>

      <br />
      <h2>价格信息</h2>
      <div>档案号： {{ model.fileNumber }}</div>
      <div>订单号：{{ model.orderNumber }}</div>
      <div>订/定单金额：{{ model.epositAmount | filterNumber(model.epositAmount)}}</div>
      <div>订单总价：{{ model.quoteAmount | filterNumber(model.quoteAmount)}}</div>

      <div v-if="model.depositAttribute == '1'">订/定金性质：可退</div>
      <div v-if="model.depositAttribute == '2'">订/定金性质：不可退</div>
      <div v-if="model.depositAttribute == '3'">订/定金性质：有条件可退</div>

      <div>
        <b>订/定金描述：</b>
        <span>{{ model.depositContent }}</span>
      </div>

      <div v-if="model.depositAttribute == '2'">订/定金不可退原因：{{ model.depositNotes }}</div>

      <div>订单生成时间：{{ model.orderDate | filterTime(model.orderDate) }}</div>

      <br />

      <h2>车辆信息</h2>
      <div>汽车品牌：{{ model.carBrand }}</div>
      <div>汽车车型： {{ model.carModel }}</div>
      <template>
        <div v-if="model.carType == 1">车辆类型： 传统车</div>
        <div v-else-if="model.carType == 2">车辆类型： 新能源汽车</div>
        <div v-else>车辆类型：{{ model.carType }}</div>
      </template>

      <div>车型配置： {{ model.carTypeConfiguration }}</div>

      <div v-if="model.fuelType == 1">燃料类型： 油/电</div>
      <div v-if="model.fuelType == 2">燃料类型： 电</div>
      <div v-if="model.fuelType == 3">燃料类型： 油</div>
      <div>车架号(vin码)： {{ model.carVin }}</div>

      <div>外饰颜色：{{ model.carColor }}</div>
      <div>内饰颜色： {{ model.interiorColor }}</div>

      <div>发动机号：{{ model.engineNumber }}</div>
      <div>合格证号：{{ model.qualifiedNumber }}</div>
      <div>动力蓄电池组编号： {{ model.batteryNumber }}</div>
      <div>货物进口证明书编号：{{ model.importProveNumber }}</div>
      <div>进口机动车辆随车检验单号：{{ model.importEngineNumber }}</div>
      <br />
      <h2>异议内容</h2>
      <div v-for="(value,key) in findWqnrList" :key="key">
        <div v-if="value.userType == '1'">异议提出日期：{{ value.createTime }}</div>
        <div v-else>
          <b>企业回复日期：{{ value.createTime }}</b>
        </div>
        <div v-for="(value2,key2) in JSON.parse(value.jsonName)" :key="key2">
          <span>{{ value2.title }}:</span>
          <span>{{ value2.info }}</span>
        </div>
        <div v-if="value.userType == '1'">备注：{{ value.contents }}</div>
        <div v-else>
          <b>企业回复内容：{{ value.contents }}</b>
        </div>

        <br />
        <br />
      </div>

      <!-- <div
        style="margin-top: 10px"
        v-if="showFindWqnrList"
      >异议说明：{{ model.objectionContents }}</div>-->

      <div style="margin-top: 10px" v-if="model.confirmStatus == 3">
        <a-textarea
          style="width: 80%"
          placeholder="请回复用户提出订单异议内容"
          v-model="objectionContents"
          v-decorator="['objectionContents', { rules: [{ required: true, message: '请回复用户提出订单异议内容' }] }]"
        />
      </div>

      <div v-if="model.confirmStatus == 2">
        <h2>订购方签名确认信息</h2>
        <div>
          签名：
          <img style="width: 70px; height: 40px" :src="model.confirmedName" alt />
        </div>
        <div>确认日期：{{ model.confirmedTime }}</div>
      </div>
    </a-spin>
    <br />
    <a-button v-if="model.confirmStatus == 3" type="primary" @click="handleSubmit">提交</a-button>
    <a-button type="primary" @click="handleCancel">返回</a-button>
  </a-drawer>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { getOrderManagerInfo } from '@/api/api'
import { strReplaceString } from '@/utils/util'
import pick from 'lodash.pick'
import moment from 'moment'

export default {
  name: 'CxmOrderManagerModal',
  data() {
    return {
      title: '订单管理',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {},
      url: {
        add: '/cxm/cxmOrderManager/add',
        edit: '/cxm/cxmOrderManager/edit',
        findWqnrList: '/cxm/cxmWqnrLog/public/findWqnrList'
      },
      showFindWqnrList: false,
      findWqnrList: [],
      objectionContents: ''
    }
  },
  created() { },
  methods: {
    close() {
      this.$emit('close')
      this.visible = false
      this.showFindWqnrList = false
    },

    handleCancel() {
      this.close()
    },
    showDrawer(record) {
      // record.documentNumber = record.documentNumber.toString().replace(/^(.{6})(?:\w+)(.{4})$/ , '$1********$2')
      this.model = Object.assign({}, record)

      let params = {
        id: this.model.id,
      }

      getOrderManagerInfo(params).then((res) => {
        console.log(res.result)
        this.model = res.result
        console.log(this.model)
      })
      this.visible = true

      let params2 = {
        wqId: this.model.id,
        wqType: '1',
        paixu: 'asc'
      }
      getAction(this.url.findWqnrList, params2).then((res) => {
        console.log(res);
        if (res.success) {
          console.log(this.showFindWqnrList);
          this.showFindWqnrList = true
          console.log(res.result);
          this.findWqnrList = res.result;
        }
      })
    },
    handleSubmit(record) {
      const that = this
      //let that = this.model;

      let method = 'put'
      let formData = {
        id: that.model.id,
        objectionContents: that.objectionContents,
        confirmStatus: 4,
      }

      httpAction(this.url.edit, formData, method)
        .then((res) => {
          if (res.success) {
            // that.$message.success(res.message)
            that.$emit('ok')
            location.reload()
          } else {
            that.$message.warning(res.message)
          }
        })
        .finally(() => {
          that.confirmLoading = false
          that.close()
        })
      this.visible = false
    },
  },
  filters: {
    filterTime(time) {
      moment
      return moment(time).format('YYYY-MM-DD')
    },
    filterNumber(value){
      return Number(value).toFixed(2) + '元';
    }
  },
}
</script>

<style lang="less" scoped>
/** Button按钮间距 */
.ant-btn {
  margin-left: 30px;
  margin-bottom: 30px;
  float: right;
}
</style>